<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
    <div id="warp">
        <header id="header">
            <div class="header-search">
                <a href="javascript:;">上海<img src="../../image/jiant.png" alt=""></a>
                <input type="text"id="search"readonly="readonly" placeholder='搜索你喜欢的职位'>
            </div>
            
        </header>
        <div id="slideshow">
            <ul class="clearfix">
                <li><img src="../../image/banner2.jpg" alt=""></li>
                <li><img src="../../image/banner1.jpg" alt=""></li>                
                <li><img src="../../image/banner.jpg" alt=""></li>
            </ul>
        </div>
        <div id="part-time">
            <ul>
                <li><img src="../../image/hot.png" alt="">热门兼职 </li>
                <li><img src="../../image/new.png" alt="">最新兼职 </li>
                <li><img src="../../image/near.png" alt="">附近兼职 </li>
                <li><img src="../../image/week.png" alt="">周末兼职 </li>
            </ul>
        </div>
        <div id="work">
            <ul>
                <li class="task">
                    <span>门任务</span>
                    <div class="lp">
                        <p>在家葛优躺</p>
                        <p>照样能赚钱</p>
                    </div>
                    <img src="../../image/DSFSD_06.png" alt="">
                </li>
                <li class="practice">
                    <span>找实习</span>
                    <div class="lt">
                        <p class="lq">好单位大企业</p>
                    </div>
                    <img src="../../image/DSFSD_03.png" alt="">
                </li>
                <li class="travel">
                    <span>兼职旅行</span>
                    <div class="lp">
                        <p>体验免费的旅行</p>
                        <p>收获珍贵的回忆</p>
                    </div>
                    <img src="../../image/DSFSD_09.png" alt="">
                </li>
            </ul>
        </div>
        <div id="advertising">
            <div class="center">
                <div class="advertising-img">
                    <img src="../../image/O.png" alt="">
                </div>
                <div class="advertising-font">
                    <p>极品急招专场</p>
                    <p>期待您火速报名参加</p>
                </div>
            </div>
        </div>
        <div id="recommend">
            <p>今日推荐</p>
        </div>
        <div id="work-list">
            <ul>
                <li>
                    <div class="logo">
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk1">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk5">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk2">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk1">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk4">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
                
                <li>
                    <div class="logo bk2">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk4">
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk5">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                </li>
            </ul>
        </div>
           	<ul class="footerArea">
			<li pageTo="1"><img src="../../image/part-time2.png" />兼职</li>
			<li pageTo="2"><img src="../../image/bible1.png" />宝典</li>
			<li pageTo="3"><img src="../../image/msg1.png" />消息</li>
			<li pageTo="4"><img src="../../image/my1.png" />我的</li>
		</ul>
    </div>
    <!-- 城市定位 -->
    <div id="location">
        <div class="logo">
        <a href="javascript:;"><img src="../../image/zuo.png" alt=""></a>
        <span>选择城市</span>
        </div>
        <div class="location-search">
            <input type="text" placeholder='搜索你的位置'> 
            <p>当前定位城市</p>
        </div>
        <div id="city">
            <ul class="left">
            </ul>
            
        </div>
        <div id="initial">
            <ul>
            
            </ul>
        </div>
    </div>
    <script src="../../js/transform.js"></script>
    <script src="../../js/jquery-3.4.1.min.js"></script>
    <script src="../../js/public.js"></script>
    <script src="../../js/chinese.js"></script>
    <script>
    window.onload = function(){
        //JSON获取地区名，接着排序，插入对应的首字母
        var $list
        !(function(){
            let $a = $('.header-search>a')
            let $location = $('#location')
            let $wrap = $('#wrap')
            var jsonData = Fun.getJson("rejion.json");
            let obj = jsonData.province, zimu = jsonData.zimu;
            var $initial = $('#initial ul');
            var htmlCity = "";
            for (var t = 0; t < jsonData.zimu.length; t++) {
                htmlCity += '<li>' + jsonData.zimu[t] + '</li>';
            }
            $initial.html(htmlCity);
            $a.on('touchstart', function () {
                var html = "";
                var arr = []
                var str = []
                $wrap.css('display', 'none')
                $location.css('display', 'block')
                for (let i = 0; i < obj.length; i++) {
                    arr[i] = obj[i].name
                }
                console.log(arr)
                var num = 0
                for (var u = 0; u < jsonData.zimu.length; u++) {
                    for (var y = 0; y < arr.length; y++) {
                        var c = codefans_net_CC2PY(arr[y]);
                        if (c === 'ZhongQingShi') {
                            c = 'Chong';
                        }
                        if (c.substring(0, 1) === jsonData.zimu[u]) {
                            str[num] = arr[y];
                            num++;
                        }
                    }
                }
                for (let i = 0; i < obj.length; i++) {
                    html += `<li><a href="javascript:;">${str[i]}</a></li>`
                }
                $(".left").html(html);
                let $city = $('#city li')
                console.log($city)
                $city.on('click',function(){
                    $a.html($(this).text()+'<img src="../../image/jiant.png" alt="">')
                    $wrap.css('display', 'block')
                    $location.css('display', 'none')
                    document.documentElement.scrollTop = 0
                })
                for(var i = 0;i< jsonData.zimu.length;i++){
                    console.log(jsonData.zimu[i])
                    la:
                    for(var f=0;f< $city.length;f++){
                        var g = codefans_net_CC2PY($city[f].innerText);
                        if(g === 'ZhongQingShi'){
                            g = 'C'
                        }
                         if (g.substring(0, 1) === jsonData.zimu[i]) {
                            var li = document.createElement('li')
                            var text = document.createTextNode(jsonData.zimu[i])
                            li.appendChild(text);
                            // console.log(html)
                            $city.parent()[0].insertBefore(li, $city[f])
                            break la
                        }
                    }
                   
                }
                //点击字母跳转到对应的部分
                !(function(){
                    //获取地区的所有li
                     $list = $('#city li')
                    $('#initial ul li').on('click',function(){
                        var text = $(this).html()
                        for(let i=0;i<$list.length;i++){
                            if($list[i].innerHTML === text){
                                console.log($list[i].offsetTop)
                                document.documentElement.scrollTop = 777+'px'
                                console.log(document.documentElement.scrollTop)
                                $(window).scrollTop($list[i].offsetTop - $("header").height()+$list[i].offsetHeight/2+20);

                                
                            }
                        }
                    })

                })()
                // 返回上一层
                let $back = $('.logo>a')
                $back.on('touchstart', function () {
                    $wrap.css('display', 'block')
                    $location.css('display', 'none')
                })
            })
        })()
        

        !(function () {
            var $center = $('#work-list .center p:first-child')
            var jsonData = Fun.getJson("logo.json");
            var $color = $('#work-list .center .color')
            var $last = $('#work-list .center p:last-child')
            var $logo = $('#work-list .logo')
            for (let i = 0; i < $center.length; i++) {
                $center[i].innerHTML = jsonData.name[i % jsonData.name.length]
                $last[i].innerHTML = '<span class="color">' + "￥" + jsonData.monay[i % jsonData.name.length] + '</span> /天'
            }
            var logo = jsonData.logo
            for (let i = 0; i < logo.length; i++) {
                for (let j = 0; j < $center.length; j++) {
                    if ($center[j].innerText.indexOf(logo[i]) >= 0) {
                        $logo[j].innerHTML = logo[i]
                    }
                }
            }
            
        })()
        
        //地区
        ajax()
        function ajax() {
            var obj = null
            var xml = new XMLHttpRequest();
            xml.open('GET', '../../data/classfir.json');
            xml.send();
            xml.onreadystatechange = function () {
                if (xml.readyState == 4) {
                    if (xml.status == 200 || xml.status == 304) {
                        obj = xml.responseText
                        obj = JSON.parse(obj)
                        var classify = $('.classify>span:last-child>a').text();
                        for (var i = 0; i < $('#work-list li>.right>p').length; i++) {
                            $('#work-list li>.right>p')[i].innerText = obj.hot[i % obj.hot.length]
                            $('#work-list .small')[i].innerText = obj.affirm
                        }
                        
                    }
                }
            }
        }


        

        //点击跳转
        var wask = document.querySelector('#work>ul>.task');
       wask.addEventListener('click',function(){
           location.href = 'task.html';
       })
       
       var $part = $('#part-time>ul>li');
       $part.on('touchstart',function(){
           var work = $(this).text();
        document.cookie ='work='+work+';expires =';
           location.href = 'classify.html';
       })
       $('#work .practice').on('click',function(){
           location.href = 'practice.html';
       })
	$(".travel").click(function  () {
		window.open("travel.html","_self");
	})

//职位详情
$("#work-list li").click(function  () {
	window.open("particulars.html","_self");
    // 
    var name = $(this).children('.center').children(':first(p)').text()
    var residue = $(this).children('.right').children(':last()').text()
    var money = $(this).children('.center').children(':last(p)').text()
    // var quantity = $(this).parent().children('.right').children('p').children('span').text()
    console.log(name, residue, money)
    var obj = {
        "message": name,
        "money": money,
        "residue": residue
        // "quantity": quantity
    }
    obj = JSON.stringify(obj)
    document.cookie = 'index=' + obj + ';expires =' + new Date(new Date + 7);
    // 
})
//搜索
$("#search").click(function  () {
	window.open("work.html","_self");
})

    //在地区名搜索
    // !(function (){
    //     let $location = $('.location-search input')
    //     $location.on('input',function(){
    //        for(let i =0;i<$list.length;i++){
    //            $list[i].style.background = 'while'
    //            if($list[i].innerHTML.indexOf($location.val())>=0){
    //                console.log('123')
    //                $list[i].style.background = 'red'
    //                break
    //            }
    //        }
    //     })
    // })()



    slideshow();
        //轮播图
        function slideshow(e) {
            var list = document.querySelector('#slideshow ul')
            list.innerHTML += list.innerHTML
            var liNodes = document.querySelectorAll('#slideshow ul li')
            var slideshow = document.querySelector('#slideshow')
            var span = document.querySelectorAll('#slideshow span')
            list.style.width = liNodes.length + '00%'
            for (var i = 0; i < liNodes.length; i++) {
                liNodes[i].style.width = 100 / liNodes.length + '%'
            }
            var eleX //获取元素的距离
            var startX //获取触摸时的坐标
            var moveX //获取移动时的坐标
            var disX //获取手指距离差
            var now = 0 //获取下标
            var tim //定时器名称
            var startY
            var moveY
            var isFirst = true;
            var isX = true;
            slideshow.addEventListener('touchstart', function (e) {
                clearInterval(tim)
                list.style.transition = 'none'
                var touch = e.changedTouches[0]
                if (now == 0) {
                    now = liNodes.length/2
                } else if (now == liNodes.length - 1) {
                    now = (liNodes.length/2) - 1
                }
                eleX = -now * liNodes[0].offsetWidth
                startX = touch.clientX
                startY = touch.clientY
                transformCss(list, 'translateX', eleX)
                e.stopPropagation()
                e.preventDefault()
                isFirst = true;
                isX = true;
            })
            slideshow.addEventListener('touchmove', function (e) {
                var touch = e.changedTouches[0]
                moveX = touch.clientX
                disX = moveX - startX
                moveY = touch.clientY
                var disY = moveY - startY
                transformCss(list, 'translateX', eleX + disX)
                e.stopPropagation()
                e.preventDefault()
            })
            slideshow.addEventListener('touchend', function (e) {
                autoTimer()
                list.style.transition = '0.5s transform'
                now = Math.round(-transformCss(list, 'translateX') / document.documentElement.offsetWidth)
                transformCss(list, 'translateX', -now * liNodes[0].offsetWidth)
                e.stopPropagation()
                e.preventDefault()
            })
            autoTimer()
            function autoTimer() {
                tim = setInterval(function () {
                    if (now == liNodes.length - 1) {
                        now = liNodes.length/2 - 1
                        list.style.transition = 'none'
                        transformCss(list, 'translateX', -now * document.documentElement.clientWidth)
                    }
                     setTimeout(function () {
                        now++
                        list.style.transition = '0.5s transform'
                        transformCss(list, 'translateX', -now * liNodes[0].offsetWidth)
                        
                    }, 20)
                }, 2000)
            }

        }
    }
    </script>
</body>
</html>